<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">头部设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['areaHeight']"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">补充说明设置</el-divider>
      </div>

      <template v-if="optionsInfo['replenishArea']">
        <el-form-item class="replenish-shown" label="视图显示">
          <el-switch v-model="optionsInfo.replenishShown"/>
        </el-form-item>

        <el-form-item class="replenish-shown" label="文字内容">
          <el-input :disabled="optionsInfo['replenishShown']" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="optionsInfo.replenishContent" placeholder="请输入内容" size="small"/>
        </el-form-item>

        <el-form-item class="replenish-shown" label="文字字号">
          <el-input-number
              :min="12"
              size="small"
              :disabled="optionsInfo['replenishShown']"
              v-model="optionsInfo['replenishFontSize']"
          />
        </el-form-item>

        <el-form-item class="replenish-shown" label="文字颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              :disabled="optionsInfo['replenishShown']"
              v-model="optionsInfo['roomNameColor']"/>
        </el-form-item>

      </template>

    </div>


    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">呼叫患者设置</el-divider>
      </div>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">候诊患者设置</el-divider>
      </div>
      <el-form-item label="垂直列">
        <el-input-number
            :min="3"
            :max="4"
            size="small"
            v-model="optionsInfo['waitPatientInfo']['patientListRow']"
        />
      </el-form-item>
      <el-form-item label="首屏数量">
        <el-input-number
            :min="5"
            :max="7"
            size="small"
            v-model="optionsInfo['waitPatientInfo']['patientListCol']"
        />
      </el-form-item>
      <el-form-item label="是否滚动">
        <el-switch v-model="optionsInfo['waitPatientInfo']['scroll']"/>
      </el-form-item>
      <el-form-item label="滚动速度">
        <el-input-number
            :min="1"
            :max="6"
            size="small"
            v-model="optionsInfo['waitPatientInfo']['scrollStep']"
            :disabled="!(optionsInfo['waitPatientInfo']['scroll'])"
        />
      </el-form-item>
      <el-form-item label="字号大小">
        <el-input-number
            :min="1"
            size="small"
            v-model="optionsInfo['waitPatientInfo']['fontSize']"
        />
      </el-form-item>
      <el-form-item class="replenish-shown" label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['waitPatientInfo']['fontColor']"/>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">未取药患者设置</el-divider>
      </div>
      <el-form-item label="垂直列">
        <el-input-number
            :min="2"
            :max="3"
            size="small"
            v-model="optionsInfo['curPatientInfo']['patientListRow']"
        />
      </el-form-item>
      <el-form-item label="首屏数量">
        <el-input-number
            :min="5"
            :max="7"
            size="small"
            v-model="optionsInfo['curPatientInfo']['patientListCol']"
        />
      </el-form-item>
      <el-form-item label="是否滚动">
        <el-switch v-model="optionsInfo['curPatientInfo']['scroll']"/>
      </el-form-item>
      <el-form-item label="滚动速度">
        <el-input-number
            :min="1"
            :max="6"
            size="small"
            v-model="optionsInfo['curPatientInfo']['scrollStep']"
            :disabled="!(optionsInfo['curPatientInfo']['scroll'])"
        />
      </el-form-item>
      <el-form-item label="字号大小">
        <el-input-number
            :min="1"
            size="small"
            v-model="optionsInfo['curPatientInfo']['fontSize']"
        />
      </el-form-item>
      <el-form-item class="replenish-shown" label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['curPatientInfo']['fontColor']"/>
      </el-form-item>
    </div>
  </div>
</template>

<script>
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "windowPatientInfoConfig-editor",
  componentName: "windowPatientInfoConfig-editor",
  mixins: [],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ['serverFieldList', 'getDesignerConfig'],
  data() {
    return {
      optionsInfo:Object(),
      predefineColors: types['predefineColors'],
    }
  },

  computed: {},

  methods: {},


  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        if(!Reflect.has(val[val.config],'deptName')){
          Reflect.set(val[val.config],'deptName','采血处')
        }
        if(!Reflect.has(val[val.config],'deptNameAuto')){
          Reflect.set(val[val.config],'deptNameAuto',true)
        }
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>


<style lang="scss" scoped>
.replenish-shown{
  display: flex;
  flex-direction: column;
  :deep(label){
    width: 100% !important;
  }
  :deep(.el-form-item__content){
    margin-left: 0 !important;
  }
}
</style>
